<template>
    <s-layout title="年度活动">
        <view class="content">
            <view class="text-area">
                <view class="top">
                    <!-- <view class="left">
						<image src="../../static/img/activity/roll.png" mode=""></image>
						<view class="valBox">
							<view>礼卷数</view>
							<view class="val">2</view>
						</view>
					</view> -->
                    <view class="right">
                        <image src="../../static/img/activity/integralImg.png" mode=""></image>
                    </view>
                </view>
                <!-- 打卡记录 -->
                <view class="record">
                    <view class="title">{{punchCard?'已':'未'}}打卡{{monthVal}}月</view>
                    <view class="hint">连续打卡12个月，获得一张优惠券</view>
                    <view class="monthBox">
                        <view class="schedule" v-for="(item, index) in list" :key="index"
                            :style="{background: item.selected ? '#ed7f49' : '#fafafa', color: item.selected ? '#fff' : '#ed7f49' }">
                            <view class="time">{{item.month}}月</view>
                            <view class="statusicon">
                                <image :src=" item.selected ? finish : iconImg" mode=""></image>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 打卡享礼卷 -->
                <view class="task">
                    <view class="title">打卡享优惠券</view>
                    <view class="task_select">
                        <image src="../../static/img/activity/nav2.png" mode=""></image>
                        <view class="headline">打卡任务2选1</view>
                        <!-- 照片打卡 -->
                        <view class="photo">
                            <view class="left">
                                <view class="iconBox">
                                    <image class="Sicon" src="../../static/img/activity/photo.png" mode=""></image>
                                    <view>照片打卡</view>
                                </view>
                                <view class="text">上传1张跑步照片，提现时间和公里数</view>
                            </view>
                            <view class="right" :style="{'background':punchCard?'#ccc':'linear-gradient(to right, #eb6a33, #e73f2f)'}" @tap="getUpload(1)">{{punchCard ?'已打卡':'立即打卡'}}</view>
                        </view>
                        <!-- 视频打卡 -->
                        <view class="video">
                            <view class="left">
                                <view class="iconBox">
                                    <image class="Sicon" src="../../static/img/activity/video.png" mode=""></image>
                                    <view>视频打卡</view>
                                </view>
                                <view class="text">使用KEEP、跑悦圈等运动软件制作视频后上传</view>
                            </view>
                            <view class="right" :style="{'background':punchCard?'#ccc':'linear-gradient(to right, #eb6a33, #e73f2f)'}" @tap="getUpload(2)">{{punchCard ?'已打卡':'立即打卡'}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </s-layout>
</template>

<script>
    export default {

        data() {
            return {
                monthVal: 3,
                rollV: "xx",
                finish: "/static/img/activity/accomplish.png",
                iconImg: "/static/img/activity/integral.png",
                id: '',
                punchCard:false,
                list:''
            }
        },
        onLoad() {
            this.getData()
            this.id = JSON.parse(uni.getStorageSync('user-store')).userInfo.id
            this.monthVal =  new Date().getMonth() + 1
        },
        methods: {
            getUpload(checkin_type) {
                let that = this
                if(!this.punchCard){
                    if (checkin_type == 1) {
                        uni.chooseImage({
                            count: 1, //默认9
                            sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                            sourceType: ['album'], //从相册选择
                            success: function(res) {
                                that.getUploadResult(checkin_type, res.tempFilePaths[0])
                            }
                        });
                    } else {
                        uni.chooseVideo({
                            sourceType: ['camera', 'album'],
                            success: function(res) {
                                that.getUploadResult(checkin_type, res.tempFilePath)
                            }
                        });
                    }
                }
            },
            async getData(){
                const res = await uni.request({
                    url:'https://www.paopaomala.top/index.php/addons/shopro/user.user/checkin',
                    header:{
                        token:uni.getStorageSync('token')
                    },
                    method:'GET'
                })
                if(res.data.code == 1){
                    this.list =res.data.data.slice(0,12)
					console.log(this.list);
					
                    this.punchCard =res.data.data[res.data.data.length-1].selected
					
					console.log(this.punchCard);
                    this.$forceUpdate()
                }else{
                   uni.showToast({
                       title:'请求错误',
                       duration:2000
                   }) 
                }
                
            },
            async getUploadResult(checkin_type, file) {
                const res = await uni.uploadFile({
                    url: 'https://www.paopaomala.top/index.php/api/Index/upload', //仅为示例，非真实的接口地址
                    filePath: file,
                    name: 'file',
                    formData: {
                        checkin_type,
                        userid: this.id
                    }
                });
                if(JSON.parse(res.data).code === 1){
                    uni.showToast({
                        title:'打卡成功',
                        duration:2000
                    })
                    this.getData()
                }else {
                    uni.showToast({
                        title:'请求错误',
                        duration:2000
                    })
                }
            },
        }
    }
</script>

<style>
    .content {
        width: 100vw;
        height: 100vh;
        background: #f4f4f4;
        overflow: hidden;
    }

    .text-area {
        width: 690rpx;
        height: 100vh;
        margin: 0 auto;
        padding: 20rpx 0 0;
        overflow: hidden;
    }

    .text-area .top {
        display: flex;
        justify-content: space-between;
        position: relative;
    }

    .text-area .top .left {
        width: 280rpx;
        height: 110rpx;
        border-radius: 55rpx;
        background: linear-gradient(#faf3ed, #f7e6d7);
        display: flex;
        align-items: center;
        font-size: 32rpx;
        color: #333333;
    }

    .text-area .top .valBox {
        text-align: center;
        margin-left: 10rpx;
    }

    .text-area .top .left .val {
        font-weight: bold;
    }

    .text-area .top .left image {
        display: block;
        width: 130rpx;
        height: 130rpx;
    }

    .text-area .top .right image {
        display: block;
        width: 580rpx;
        height: 440rpx;
        position: absolute;
        right: -220rpx;
    }

    /* 打卡记录 */
    .record {
        height: 390rpx;
        border-radius: 20rpx;
        background-color: #fff;
        margin-top: 80rpx;
        position: relative;
        z-index: 2;
        padding: 20rpx;
    }

    .record .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #1a1919;
        padding: 20rpx 0 0;
    }

    .record .hint {
        font-size: 20rpx;
        color: #999999;
        font-weight: 400;
        margin: 10rpx 0;
    }

    .monthBox {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .monthBox .schedule {
        width: 100rpx;
        height: 110rpx;
        border-radius: 8rpx;
        background-color: #fafafa;
        margin-top: 10rpx;
        text-align: center;
        font-size: 24rpx;
        padding: 10rpx 0;
    }

    .monthBox .schedule .statusicon {
        display: flex;
        justify-content: center;
    }

    .statusicon image {
        max-width: 50rpx;
        height: 55rpx;
        display: block;
        margin-top: 10rpx;
    }

    /* 打卡享礼卷 */
    .task {
        width: 690rpx;
        height: 300rpx;
        margin: 0 auto;
    }

    .task .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #1a1919;
        margin: 30rpx 0;
        padding: 0 20rpx;
    }

    .task_select {
        height: 340rpx;
        padding: 0 10rpx;
        position: relative;
        background-color: #fff;
        border-radius: 20rpx;
    }

    .task_select image {
        position: absolute;
        display: block;
        width: 280rpx;
        height: 50rpx;
        top: 0;
        margin-left: 205rpx;
    }

    .headline {
        text-align: center;
        font-size: 28rpx;
        font-weight: bold;
        color: #1a1919;
        position: relative;
        z-index: 2;
        padding: 4rpx 0;
    }

    .photo,
    .video {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 10rpx;
    }

    .photo {
        border-bottom: 1rpx solid #f4f4f4;
    }

    .photo .iconBox,
    .video .iconBox {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        font-weight: bold;
        color: #1a1919;
    }

    .photo .iconBox .Sicon,
    .video .iconBox .Sicon {
        position: relative;
        display: block;
        width: 36rpx;
        height: 30rpx;
        margin: 10rpx;
    }

    .photo .left .text,
    .video .left .text {
        font-size: 20rpx;
        color: #999999;
    }

    .photo .right,
    .video .right {
        font-size: 24rpx;
        color: #fff;
        width: 150rpx;
        text-align: center;
        line-height: 50rpx;
        height: 50rpx;
        border-radius: 25rpx;
        background: linear-gradient(to right, #eb6a33, #e73f2f);
    }
</style>